<template>
  <div class="goods">
    <center>
      <el-image style="height:360px;" :src="baseURL+'data/picture/'+merchant.pic.url"
                :preview-src-list="[baseURL+'data/picture/'+merchant.pic.url]"
                fit='cover'/>
      <h1>{{ merchant.name }}</h1>
      <p v-html="merchant.describe.content"/>
    </center>
    <el-divider></el-divider>
    <el-descriptions class="margin-top" title="" :column="3" :size="''" border>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-info"></i>
          状态
        </template>
        <span v-if="merchant.state===1">
        营业中
      </span>
        <span v-else-if="merchant.state===2">
        整改中
      </span>
        <span v-else-if="merchant.state===0">
        封禁中
      </span>
        <span v-else>
        休店啦
      </span>
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-mobile-phone"></i>
          联系电话
        </template>
        {{ merchant.telephone }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-timer"></i>
          创建时间
        </template>
        {{ merchant.creattime }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-chat-line-round"></i>
          QQ
        </template>
        {{ merchant.qq }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-chat-dot-round"></i>
          WX
        </template>
        {{ merchant.wx }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-message"></i>
          Email
        </template>
        {{ merchant.email }}
      </el-descriptions-item>
    </el-descriptions>
    <!-- 排序依据 -->
    <div class="nav">
      <div class="product-nav">
        <div class="title">排序</div>
        <el-tabs v-model="sortBy" type="card">
          <el-tab-pane
              v-for="item in sortByList"
              :key="item.id"
              :label="item.name"
              :name="''+item.id"
          />
        </el-tabs>
      </div>
    </div>
    <!-- 排序依据END -->

    <!-- 升降序 -->
    <div class="nav">
      <div class="product-nav">
        <div class="title">升降</div>
        <el-tabs v-model="sortType" type="card">
          <el-tab-pane
              v-for="item in sortTypeList"
              :key="item.id"
              :label="item.name"
              :name="''+item.id"
          />
        </el-tabs>
      </div>
    </div>
    <!-- 升降序END -->
    <div class="main">
      <div class="list">
        <MallList :list="goodsList" v-if="goodsList.length>0"></MallList>
        <div v-else class="none-product">抱歉没有找到相关的商品，请看看其他的商品</div>
      </div>
      <div class="pagination">
        <el-pagination
            background
            layout="prev, pager, next"
            :page-size="pageSize"
            :total="total"
            @current-change="currentChange"
        ></el-pagination>
      </div>
    </div>

  </div>
</template>

<script>
export default {
  name: "Merchant",
  props: [],
  data() {
    return {
      /**
       * @商家id
       * */
      mid: 0,
      /**
       * @商家信息
       * */
      merchant: this.$store.state.Pojo.Merchant,
      /**
       * @商品列表
       * */
      goodsList: this.$store.state.List.GoodsVo,
      /**
       * @页码
       * */
      total: 10, // 商品总量
      pageSize: 20, // 每页显示的商品数量
      currentPage: 1, //当前页码
      /**
       * @排序
       * */
      sortBy: '10',
      sortType: '1',
      /**
       * @排序参数列表
       * */
      sortByList: [
        {
          id: 10,
          name: '时间'
        }, {
          id: 5,
          name: '热门'
        },
        {
          id: 4,
          name: '综合'
        },
        {
          id: 2,
          name: '价格'
        },
      ],
      /**
       * @升降序
       * */
      sortTypeList: [
        {
          id: 1,
          name: '降序'
        }, {
          id: 0,
          name: '升序'
        }
      ]
    };
  },
  activated() {
    this.loadMerchant();
  },
  watch: {
    /**
     * @排序
     * */
    sortType:function(val){
      this.loadGoods({mid:this.mid});
    },
    sortBy:function(val){
      this.loadGoods({mid:this.mid});
    },
    // 通过订单信息，计算出每个订单的商品数量及总价
    orders: function (val) {
      /*let total = [];
      for (let i = 0; i < val.length; i++) {
        const element = val[i].goods;
        //console.log(element)
        let totalNum = 0;
        let totalPrice = 0;
        totalNum += element.number;
        totalPrice += element.payable;
        total.push({ totalNum, totalPrice });
      }
      this.total = total;*/
    }
  },
  computed: {
    /**
     * @后端资源路由
     * */
    baseURL() {
      return this.$store.state.baseURL;
    },
    /**
     * @通用函数
     * */
    helper() {
      return this.$helper;
    },
  },
  created() {

  },
  methods: {
    // 返回顶部
    backtop() {
      const timer = setInterval(function () {
        const top = document.documentElement.scrollTop || document.body.scrollTop;
        const speed = Math.floor(-top / 5);
        document.documentElement.scrollTop = document.body.scrollTop =
            top + speed;

        if (top === 0) {
          clearInterval(timer);
        }
      }, 20);
    },
    /**
     * @页码变换
     * */
    currentChange(currentPage) {
      this.currentPage = currentPage;
      this.loadGoods({mid: this.mid});
      this.backtop();
    },
    /**
     * @导入商家信息
     * */
    loadMerchant() {
      const _this = this;
      if (!this.helper.isNull(this.$route.query.mid)) {
        this.mid = this.$route.query.mid;
      }
      // 获取订单数据
      this.$axios
          .get(this.$store.state.baseURL + 'client/' + this.$store.state.controller.Merchant
              + '/' + this.$store.state.mappings.at + '/' + this.mid + '?OperatorId=1'
          )
          .then(res => {
            _this.merchant = res.data;
            _this.loadGoods(res.data);
            //console.log(res.data);
          })
          .catch(err => {
            console.log(err);
          });
    },
    /**
     * @导入商品信息
     * */
    loadGoods(val) {
      const _this = this;
      // 获取商品数据
      this.$axios
          .post(this.$store.state.baseURL + 'client/' + this.$store.state.controller.Goods
              + '/' + this.$store.state.mappings.search + '?'
              + 'OperatorId=1', {
                "merchant.mid": val.mid,
                "page": _this.currentPage,
                "pageSize": _this.pageSize,
                "sortType": this.sortType,
                "sortBy": this.sortBy,
                "state": 1,
              }
          )
          .then(res => {
            _this.goodsList = res.data.goodsVoList;
            _this.total = res.data.count * _this.pageSize;
            //console.log(res.data);
          })
          .catch(err => {
            console.log(err);
          });
    }
  }
}
</script>

<style scoped>
.goods {
  background-color: #f5f5f5;
}

/* 面包屑CSS */
.el-tabs--card .el-tabs__header {
  border-bottom: none;
}

.goods .breadcrumb {
  height: 50px;
  background-color: white;
}

.goods .breadcrumb .el-breadcrumb {
  width: 1225px;
  line-height: 30px;
  font-size: 16px;
  margin: 0 auto;
}

/* 面包屑CSS END */

/* 分类标签CSS */
.goods .nav {
  background-color: white;
}

.goods .nav .product-nav {
  width: 1225px;
  height: 40px;
  line-height: 40px;
  margin: 0 auto;
}

.nav .product-nav .title {
  width: 50px;
  font-size: 16px;
  font-weight: 700;
  float: left;
}

/* 分类标签CSS END */

/* 主要内容区CSS */
.goods .main {
  margin: 0 auto;
  max-width: 1225px;
}

.goods .main .list {
  min-height: 650px;
  padding-top: 14.5px;
  margin-left: -13.7px;
  overflow: auto;
}

.goods .main .pagination {
  height: 50px;
  text-align: center;
}

.goods .main .none-product {
  color: #333;
  margin-left: 13.7px;
}

/* 主要内容区CSS END */
</style>